<template>
  <div class="driver">
    <div class="driver-head">

      <el-form :inline="true" class="driver-head-form" :model="driverForm">
        <el-form-item label="司机账号:" style="width:30%" prop="account">
          <el-input v-model="driverForm.account" placeholder="请输入司机账号" style="width:130%" />
        </el-form-item>
        <el-form-item label="司机姓名:" style="width:30%" prop="name">
          <el-input v-model="driverForm.name" placeholder="请输入司机姓名" style="width:130%" />
        </el-form-item>
        <el-form-item label="司机手机号:" style="width:30%" prop="phone">
          <el-input v-model="driverForm.phone" placeholder="请输入司机手机号" style="width:130%" />
        </el-form-item>
        <el-form-item label="所属机构" style="width:30%" prop="agentld">
          <el-select v-model="driverForm.agentld" placeholder="请选择所属机构" style="width:130%">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getDriver">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="driver-body">
      <el-table
        style="width: 100%"
        :data="driverData.items"
      >
        <el-table-column
          label="序号"
          width="80"
          type="index"
        />
        <el-table-column
          label="司机账号"
          width="180"
          prop="account"
        />
        <el-table-column
          label="司机姓名"
          width="190"
          prop="name"
        />
        <el-table-column
          label="司机手机号"
          width="190"
          prop="mobile"
        />
        <el-table-column
          label="关联车辆"
          width="190"
          prop="truck.licensePlate"
        />
        <el-table-column
          label="所属机构"
          width="190"
          prop="agency.name"
        />
        <el-table-column
          label="工作状态"
          width="190"
          prop="workStatus"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template v-slot>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="driverForm.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(driverData.counts)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>

    <div class="driver-foot">
      <span>江苏传智博客教育科技股份有限公司</span>
      <span>版权所有Copyright 2006-2022  All Rights Reserved</span>
      <span>苏ICP备16007882号-11</span>
    </div>
  </div>

</template>

<script>
import { getDriver } from '@/api/driver'
import { getInstitution } from '@/api/courier'
export default {
  components: {},
  data() {
    return {
      driverForm: {
        account: '',
        agentld: '',
        name: '',
        page: 1,
        pageSize: 10,
        phone: '',
        workStatus: ''
      },
      // 司机分页数据
      driverData: {},
      // 树状机构详情
      options: []
    }
  },
  created() {
    // 执行获取司机分页方法
    this.getDriver()
    // 调用获取树状机构详情方法
    this.getInstitution()
  },
  methods: {
    // 获取司机分页数据
    async getDriver() {
      this.driverData = await getDriver(this.driverForm)
    },
    // 获取树状机构详情方法
    async getInstitution() {
      const data = await getInstitution()
      this.options = JSON.parse(data)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.driverForm.page = val
      this.getDriver()
    }
  }
}
</script>

<style scoped  lang="scss">
.driver {
  font-weight: 700;
  background-color: #f3f5f9;

  .driver-head{
    margin: 10px 20px 20px 20px;
     width: 100%;
     height: 141px;
     padding: 20px 20px 20px 40px;
     background-color: #fff;

     .driver-head-form {
      display: flex;
      flex-wrap: wrap;

      .el-input__suffix.is-show {
      opacity: 1;
      pointer-events: auto;
}
     }
  }

  .driver-body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin:  20px;
     width: 100%;
     padding: 20px 20px 20px 20px;
     background-color: #fff;

     .el-table{
      align-self: center;
     }

     .el-pagination{
      align-self: center;
      margin-top: 20px;
     }
  }

  .driver-foot{
    margin-left: 330px;
    font-size: 14px;
    color: #bac0cd;
    font-weight: 400;
  }
}
</style>
